<template>
  <div class="company-container">
    <el-form size="medium" ref="formData" :model="formData" :rules="rules" class="company-form"
             label-position="right">

      <div class="title-container">
        <h5 class="title">公&emsp;司&emsp;注&emsp;册</h5>
      </div>

      <el-form-item prop="name" label="公司名称">
        <el-input
          ref="name"
          name="name"
          v-model="formData.name"
          placeholder="公司名称"
          tabindex="1"
        />
      </el-form-item>

      <el-form-item prop="username" label="用户名">
        <el-input
          ref="username"
          name="username"
          v-model="formData.username"
          placeholder="管理员登录用户名"
          tabindex="1"
        />
      </el-form-item>

      <el-tooltip v-model="capsTooltip" content="大写输入" placement="right" manual>
        <el-form-item prop="password" label="密码">
          <el-input
            ref="password"
            name="password"
            :key="passwordType"
            v-model="formData.password"
            :type="passwordType"
            placeholder="管理员登录密码"
            tabindex="1"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-tooltip>
      <el-tooltip v-model="capsTooltip" content="大写输入已开启" placement="right" manual>
        <el-form-item prop="passwordRepeat" label="确认密码">
          <el-input
            :key="passwordType"
            v-model="formData.passwordRepeat"
            :type="passwordType"
            placeholder="确认管理员登录密码"
            tabindex="1"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-tooltip>
      <div style="padding: 0 1px 0 7px">
        <el-button size="middle" :loading="loading" type="primary"
                   style="width:100%;"
                   @click.native.prevent="submitForm">注&emsp;&emsp;册
        </el-button>
      </div>
      <div style="padding: 10px 1px 0 7px">
        <link-button type="text" route-name="login">已有账号去登陆</link-button>
      </div>
    </el-form>
  </div>
</template>

<script>

  import {pattern} from "@/utils/validate";
  import {exist as existCompanyName, save} from "@/api/company";
  import {exist as existUserName} from "@/api/user";

  export default {
    name: 'companyReg',
    data() {
      const nameAsyncValidator = (rule, value, callback) => {
        existCompanyName(this.formData).then(function (response) {
          if (response.data === true) {
            callback(new Error(response.data))
          } else {
            callback();
          }
        }, function (error) {
          callback(new Error(error))
        })
      }
      const usernameAsyncValidator = (rule, value, callback) => {
        existUserName(this.formData).then(function (response) {
          if (response.data === true) {
            callback(new Error(response.data))
          } else {
            callback();
          }
        }, function (error) {
          callback(new Error(error))
        });
      }
      return {
        formData: {
          name: '',
          username: '',
          password: '',
          passwordRepeat: ''
        },
        rules: {
          name: [
            {required: true, trigger: 'blur', message: "公司名称不能为空"},
            {pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5_-]{2,64}$/, trigger: 'blur', message: "公司名称只能输入2至64个中英文数字()-"},
            {
              validator: nameAsyncValidator, trigger: 'blur', message: "公司名称已存在"
            }
          ],
          username: [
            {required: true, trigger: 'blur', message: "管理员登录用户名不能为空"},
            {pattern: pattern.username, trigger: 'blur', message: "用户名为2至12个英文数字组合"},
            {validator: usernameAsyncValidator, trigger: 'blur', message: "用户名已存在"}
          ],
          passwordRepeat: [
            {required: true, trigger: 'blur', message: "请再次输入密码"},
            {
              validator: (rule, value, callback) => {
                console.log("再次校验密码", value, this.formData.password)
                if (value === this.formData.password) {
                  callback()
                } else {
                  callback(new Error(""))
                }
              }, trigger: 'blur', message: "两次输入密码不一致"
            },
          ],
          password: [
            {required: true, trigger: 'blur', message: "管理员登录密码不能为空"},
            {pattern: pattern.password, trigger: 'blur', message: "密码1至12个英文或数字或特殊字符"},
          ]
        },
        passwordType: 'password',
        capsTooltip: false,
        loading: false,
      }
    },
    created() {
      this.$store.dispatch('user/logout')
    },
    mounted() {
      if (this.formData.name === '') {
        this.$refs.name.focus()
      } else if (this.formData.username === '') {
        this.$refs.username.focus()
      } else if (this.formData.password === '') {
        this.$refs.password.focus()
      }
    },
    methods: {
      checkCapslock(e) {
        const {key} = e
        this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
      }
      ,
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      }
      ,
      submitForm() {
        this.$business.saveOne(this, save, "login")
      }
    }
  }
</script>

<style lang="scss">

  $bg: #283443;
  $light_gray: #eee;
  $cursor: #222;

  .el-form-item__label {
    width: 79px;
    font-weight: 500;
  }

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .company-container .el-input input {
      color: $cursor;
    }
  }


  /* reset element-ui css */
  .company-container {

    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        /*background: transparent;*/
        /*border: 0px;*/
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: #333333;
        /*height: 47px;*/
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      /*background: rgba(0, 0, 0, 0.1);*/
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .company-container {
    min-height: 100%;
    width: 100%;
    /*background-color: $bg;*/
    overflow: hidden;

    .company-form {
      position: relative;
      width: 620px;
      max-width: 100%;
      padding: 130px 25px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #f4516c;
      /*margin-bottom: 10px;*/

      span {
        &:first-of-type {
          /*margin-right: 16px;*/
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      /*color: $dark_gray;*/
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $dark_gray;
        margin: 0px 10px 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      /*top: 7px;*/
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }
</style>
